<script>
import QuickLayout from '@/components/EmpsLayout/index.vue'
import ModelEdition from '@/views/bpm/manage/design/model-edition.vue'
import { deleteModel, deployModel } from '@/api/bpm/model'
import { parseTime } from '@/utils'

export default {
  name: 'DesignProcess',
  components: { ModelEdition, QuickLayout },
  data() {
    return {
      dataListUrl: 'model/page'
    }
  },
  methods: {
    parseTime,
    handleModel(id) {
      this.$refs.ModelEdition.init(id)
    },
    handelDesignModel(row) {
      this.$router.push({ path: '/manage/designer', query: { modelId: row.id, key: row.key }})
    },
    handleDeploy(row) {
      deployModel(row.id).then(() => {
        this.$message.success('部署成功')
        this.getList()
      })
    },
    handleDelete(row) {
      this.$modal.confirm('是否删除该流程！！').then(() => {
        deleteModel(row.id).then(() => {
          this.$message.success('删除成功')
          this.getList()
        })
      })
    },
    handleAssignRule(row) {
      this.$router.push({ path: '/manage/assign-rule', query: {
        modelKey: row.key,
        modelName: row.name,
        modelId: row.id,
        processDefinitionId: row.processDefinition ? row.processDefinition.id : null,
        deploymentId: row.processDefinition ? row.processDefinition.deploymentId : null
      }})
    },
    getList() {
      return this.$refs.RefMenu.query()
    },
    handleChangeState() {

    }
  }
}
</script>

<template>
  <quick-layout
    ref="RefMenu"
    size="small"
    row-key="id"
    :is-operate-btn="true"
    :is-operate="false"
    :is-show-delete="false"
    :data-list-url="dataListUrl"
    @edit="handleModel"
    @created="handleModel(null)"
  >
    <template #query="{query}">
      <el-form-item label="查询">
        <el-input v-model="query.name" placeholder="请输入关键字" />
      </el-form-item>
    </template>

    <template>
      <el-table-column prop="name" label="流程名称" align="center" />
      <el-table-column prop="key" label="流程标识" align="center" />
      <el-table-column prop="description" label="流程描述" align="center" />
      <el-table-column label="最新部署的流程定义" align="center">
        <el-table-column label="流程版本" align="center" prop="processDefinition.version" width="80">
          <template v-slot="scope">
            <el-tag v-if="scope.row.processDefinition" size="medium">v{{ scope.row.processDefinition.version }}</el-tag>
            <el-tag v-else size="medium" type="warning">未部署</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="激活状态" align="center" prop="processDefinition.version" width="80">
          <template v-slot="scope">
            <el-switch
              v-if="scope.row.processDefinition"
              v-model="scope.row.processDefinition.suspensionState"
              :active-value="1"
              :inactive-value="2"
              @change="handleChangeState(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="部署时间" align="center" prop="deploymentTime" width="180">
          <template v-slot="scope">
            <span v-if="scope.row.processDefinition">{{ new Date(scope.row.processDefinition.deploymentTime).toLocaleString() }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column prop="createTime" label="操作" width="300" align="center">
        <template v-slot="{row}">
          <el-button size="mini" type="text" @click="handleModel(row.id)">修改模型</el-button>
          <el-button size="mini" type="text" @click="handelDesignModel(row)">设计模型</el-button>
          <el-button size="mini" type="text" @click="handleDeploy(row)">发布流程</el-button>
          <el-button size="mini" type="text" @click="handleAssignRule(row)">分配规则</el-button>
          <el-button size="mini" type="text" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </template>
    <template #component>
      <model-edition ref="ModelEdition" />
    </template>

  </quick-layout>
</template>

<style scoped lang="scss">

</style>
